<template>
<div>
    <h1>App根组件</h1>
    <hr>
    <input type="text" class="form-control" v-if="inputVisible" ref="ipt"/>
    <button type="button" class="btn btn-primary" v-else @click="showInput">展示input输入框</button>
</div>
</template>

<script>
export default{
    name:'MyApp',
    data() {
        return {
            inputVisible:false,
        }
    },
    methods: {
        showInput(){
            // 运行这个方法，展示文本框
            this.inputVisible=true
            // this.$nextTick 把对文本框的操作，推迟到下次Dom更新之后，否则页面上根本不存在文本框元素
            this.$nextTick(()=>{
                // 获取到文本框的Dom对象，然后调用focus()方法
                this.$refs.ipt.focus();
            })
        }
    },
}
</script>

<style lang="less" scoped>
input.form-control {
  width: 280px;
  display: inline;
  vertical-align: bottom;
}
</style>
